import * as THREE from 'three'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
export class Font{
  constructor(scene){
    this.scene = scene
    this.font = null

    this.init()
  }
  init(){
    const loader = new FontLoader()
    loader.load('font.json',(font)=>{
      this.font = font

      // 创建字体几何体
      this.createTextQueue()
    })
  }
  createTextQueue(){
    [
      {
        text:'No.1楼',
        size:20,
        position:{
          x:-10,
          y:130,
          z:410
        },
        rotate:Math.PI / 1.3,
        color:'#ffffff'
      },    {
        text:'No.2楼',
        size:20,
        position:{
          x:180,
          y:110,
          z:-70
        },
        rotate:Math.PI / 2,
        color:'#ffffff'
      }
    ].forEach(item=>{
      this.createText(item)
    })
  }
  createText(data){
    const geometrie = new TextGeometry(data.text,{
      font:this.font,
      size:data.size,
      height:2
    })
    const material = new THREE.ShaderMaterial({
      vertexShader:`
      void main(){
        gl_Position =  projectionMatrix * modelViewMatrix * vec4(position , 1.0);
      }
      `,
      fragmentShader:`
      void main(){
        gl_FragColor = vec4(1.0,1.0,1.0,1.0);
      }
      `
    })
    const mesh = new THREE.Mesh(geometrie,material)
    mesh.position.copy(data.position)
    mesh.rotateY(data.rotate)
    this.scene.add(mesh)
  }
}